<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>axios常用配置以及默认配置</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
    </head>
    <body>
        <button>战士</button>
        <button>法师</button>
        <script>
            /**
             * axios(config)
             * axios.get(url, config)
             * 常用配置:
             * 1. method    请求类型
             * 2. url       请求的 URL  (重要)
             * 3. headers   请求头
             * 4. data      请求体  (重要)
             * 5. timeout   超时时间
             * 6. baseURL   基础 URL  (重要)
             * 7. params    查询字符串参数 (重要)   参数
             */
            //默认配置
            axios.defaults.baseURL = "http://127.0.0.1:3000";
            axios.defaults.timeout = 2000;
            axios.defaults.method = "post";

            //发送请求
            /*
                axios({
                    method: 'get',
                    url: '/movie',
                    headers: {
                        name: 'h5211227'
                    },
                    //请求体  对象  =>  JSON 格式的请求体
                    // data: {
                    //     a: 100,
                    //     b: 200
                    // }
                    // data: 'c=300&d=400'  // querystring 查询字符串形式的请求体
                })
            */

            //获取所有的按钮
            let btns = document.querySelectorAll("button");

            //第一个按钮绑定事件
            btns[0].onclick = async function () {
                //发送请求获取战士
                //设置查询字符串的方式一  如果参数只有一个可以建议使用这种方式
                // let result = await axios({
                //     method: 'get', //axios 的默认请求类型为 get
                //     url: 'http://api.xiaohigh.com/lol?q=战士'
                // });

                //设置查询字符串的方式二 如果参数不止一个可以建议使用这种方式
                let result = await axios({
                    method: "get",
                    url: "http://api.xiaohigh.com/lol",
                    //设置查询字符串
                    params: {
                        q: "战士",
                    },
                });

                console.log(result);
            };

            //第二个按钮绑定事件
            btns[1].onclick = async function () {
                // let result = await axios.get('http://api.xiaohigh.com/lol?q=法师');
                let result = await axios.get("http://api.xiaohigh.com/lol", {
                    params: { 
                        q: "法师" 
                    },
                }); //params 是配置对象中的一个属性
                console.log(result);
            };
        </script>
    </body>
</html>
